<rd-header>
  <rd-header-title title-text="Create Custom template"></rd-header-title>
  <rd-header-content> <a ui-sref="kubernetes.templates.custom">Custom Templates</a> &gt; Create Custom template </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.form">
          <custom-template-common-fields form-values="$ctrl.formValues"></custom-template-common-fields>

          <!-- build-method -->
          <div class="col-sm-12 form-section-title"> Build method </div>
          <box-selector radio-name="'method'" value="$ctrl.state.method" options="$ctrl.methodOptions" on-change="($ctrl.onChangeMethod)"></box-selector>

          <web-editor-form
            ng-if="$ctrl.state.method === 'editor'"
            identifier="template-creation-editor"
            value="$ctrl.formValues.FileContent"
            on-change="($ctrl.onChangeFileContent)"
            ng-required="true"
            yml="true"
            placeholder="# Define or paste the content of your manifest file here"
          >
            <editor-description>
              <p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>
              <p>
                You can get more information about Kubernetes file format in the
                <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
              </p>
            </editor-description>
          </web-editor-form>

          <file-upload-form ng-if="$ctrl.state.method === 'upload'" file="$ctrl.formValues.File" on-change="($ctrl.onChangeFile)" ng-required="true">
            <file-upload-description> You can upload a Manifest file from your computer. </file-upload-description>
          </file-upload-form>

          <por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>

          <!-- actions -->
          <div class="col-sm-12 form-section-title"> Actions </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="$ctrl.state.actionInProgress || $ctrl.form.$invalid || ($ctrl.state.method === 'editor' && !$ctrl.formValues.FileContent)"
                ng-click="$ctrl.createCustomTemplate()"
                button-spinner="$ctrl.state.actionInProgress"
              >
                <span ng-hide="$ctrl.state.actionInProgress">Create custom template</span>
                <span ng-show="$ctrl.state.actionInProgress">Creation in progress...</span>
              </button>
              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
                {{ $ctrl.state.formValidationError }}
              </span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
